<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en">
<!--<![endif]-->
<head lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv= "Expires" CONTENT="0">
    <meta http-equiv= "Cache-Control" CONTENT="no-cache">
    <meta http-equiv= "Pragma" CONTENT="no-cache">
    <meta name= "viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <meta name= "apple-mobile-web-app-capable" content="yes">
    <meta name= "apple-mobile-web-app-status-bar-style" content="black">
    <meta name= "format-detection" content="telephone=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>如释瑜伽</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!--作者：cubefan时间：2016-09-01描述：主样式表-->
    <link href="css/style.css" rel="stylesheet">
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery-1.11.3.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/layout.js"></script>
    <!--作者：cubefan时间：2016-09-01描述：主js-->
    <script type="text/javascript" src="js/fanerge.js"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script type="text/javascript" src="js/html5shiv.min.js"></script>
    <script type="text/javascript" src="js/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div id="header" class="row mg0">
    <span class="col-lg-12 col-md-12 col-sm-12 col-xs-12 course-head"><a href="javascript:history.back();"><img src='images/return.png' width='12' height='22'/></a>非会员体验预约</span>
</div>
<div id='main' class='mt44 mb49'>
	<div class='no-mem-go row mg0'>
		<div class='col-lg-5 col-md-5 col-sm-5 col-xs-5'>
			<select class='shop-name'>
				<option value="1">高新馆</option>
				<option value="2">高新馆</option>
				<option value="3">高新馆</option>
				<option value="4">高新馆</option>
			</select>
		</div>
		<div class='col-lg-2 col-md-2 col-sm-2 col-xs-2'>
			|
		</div>
		<div class='col-lg-5 col-md-5 col-sm-5 col-xs-5'>
			<select class='date-name'>
				<option value="1">周一</option>
				<option value="2">周二</option>
				<option value="3">周三</option>
				<option value="4">周四</option>
				<option value="5">周五</option>
				<option value="6">周六</option>
				<option value="7">周日</option>
			</select>
		</div>
	</div>
	<ul>
		<li class='week-course row mg0'>
			<div class='week-time col-lg-1 col-md-1 col-sm-2 col-xs-3'>
				08:00
			</div>
			<div class='week-subject col-lg-10 col-md-10 col-sm-8 col-xs-6'>
				<h3>如释维哈空中瑜伽</h3>
				<p class='coach-name'>教练：刘艳</p>
				<p class='coach-person'>还可预约<strong>10</strong>人&nbsp;&nbsp;&nbsp;<a href='course.html'>查看课堂详情</a></p>
			</div>
			<div class='coach-order col-lg-1 col-md-1 col-sm-2 col-xs-3'>
				<!-- 模态框（Modal）2小时取消约课 -->
				<a class="order-btn" href='javascript:void(0)' data-toggle="modal" data-target="#alert-cancel">预 约</a>
				<a class="order-btn-1" href='javascript:void(0)'>取消预约</a>
				<a class="order-btn-2" href='javascript:void(0)'>排队中</a>
			</div>
		</li>
		<li class='week-course row mg0'>
			<div class='week-time col-lg-1 col-md-1 col-sm-2 col-xs-3'>
				08:00
			</div>
			<div class='week-subject col-lg-10 col-md-10 col-sm-8 col-xs-6'>
				<h3>如释维哈空中瑜伽</h3>
				<p class='coach-name'>教练：刘艳</p>
				<p class='coach-person'>还可预约<strong>10</strong>人&nbsp;&nbsp;&nbsp;<a href='course.html'>查看课堂详情</a></p>
			</div>
			<div class='coach-order col-lg-1 col-md-1 col-sm-2 col-xs-3'>
				<!-- 模态框（Modal）评分 -->
				<a class="order-btn" href='javascript:void(0)' data-toggle="modal" data-target="#alert-judge">预 约</a>
				<a class="order-btn-1" href='javascript:void(0)'>取消预约</a>
				<a class="order-btn-2" href='javascript:void(0)'>排队中</a>
			</div>
		</li>
		<li class='week-course row mg0'>
			<div class='week-time col-lg-1 col-md-1 col-sm-2 col-xs-3'>
				08:00
			</div>
			<div class='week-subject col-lg-10 col-md-10 col-sm-8 col-xs-6'>
				<h3>如释维哈空中瑜伽</h3>
				<p class='coach-name'>教练：刘艳</p>
				<p class='coach-person'>还可预约<strong>10</strong>人&nbsp;&nbsp;&nbsp;<a href='course.html'>查看课堂详情</a></p>
			</div>
			<div class='coach-order col-lg-1 col-md-1 col-sm-2 col-xs-3'>
				<!-- 模态框（Modal）预约-->
				<a class="order-btn" href='javascript:void(0)' data-toggle="modal" data-target="#alert-order">预 约</a>
				<a class="order-btn-1" href='javascript:void(0)'>取消预约</a>
				<a class="order-btn-2" href='javascript:void(0)'>排队中</a>
			</div>
		</li>
		<li class='week-course row mg0'>
			<div class='week-time col-lg-1 col-md-1 col-sm-2 col-xs-3'>
				08:00
			</div>
			<div class='week-subject col-lg-10 col-md-10 col-sm-8 col-xs-6'>
				<h3>如释维哈空中瑜伽</h3>
				<p class='coach-name'>教练：刘艳</p>
				<p class='coach-person'>还可预约<strong>10</strong>人&nbsp;&nbsp;&nbsp;<a href='course.html'>查看课堂详情</a></p>
			</div>
			<div class='coach-order col-lg-1 col-md-1 col-sm-2 col-xs-3'>
				<!-- 模态框（Modal）购买-->
				<a class="order-btn" href='javascript:void(0)' data-toggle="modal" data-target="#alert-sell">预 约</a>
				<a class="order-btn-1" href='javascript:void(0)'>取消预约</a>
				<a class="order-btn-2" href='javascript:void(0)'>排队中</a>
			</div>
		</li>
		<li class='week-course row mg0'>
			<div class='week-time col-lg-1 col-md-1 col-sm-2 col-xs-3'>
				08:00
			</div>
			<div class='week-subject col-lg-10 col-md-10 col-sm-8 col-xs-6'>
				<h3>如释维哈空中瑜伽</h3>
				<p class='coach-name'>教练：刘艳</p>
				<p class='coach-person'>还可预约<strong>10</strong>人&nbsp;&nbsp;&nbsp;<a href='course.html'>查看课堂详情</a></p>
			</div>
			<div class='coach-order col-lg-1 col-md-1 col-sm-2 col-xs-3'>
				<!-- 模态框（Modal）非如释会员购买-->
				<a class="order-btn" href='javascript:void(0)' data-toggle="modal" data-target="#alert-sell-1">预 约</a>
				<a class="order-btn-1" href='javascript:void(0)'>取消预约</a>
				<a class="order-btn-2" href='javascript:void(0)'>排队中</a>
			</div>
		</li>
		<li class='week-course row mg0'>
			<div class='week-time col-lg-1 col-md-1 col-sm-2 col-xs-3'>
				08:00
			</div>
			<div class='week-subject col-lg-10 col-md-10 col-sm-8 col-xs-6'>
				<h3>如释维哈空中瑜伽</h3>
				<p class='coach-name'>教练：刘艳</p>
				<p class='coach-person'>还可预约<strong>10</strong>人&nbsp;&nbsp;&nbsp;<a href='course.html'>查看课堂详情</a></p>
			</div>
			<div class='coach-order col-lg-1 col-md-1 col-sm-2 col-xs-3'>
				<!-- 模态框（Modal）填写预约信息-->
				<a class="order-btn" href='javascript:void(0)' data-toggle="modal" data-target="#alert-new-order">预 约</a>
				<a class="order-btn-1" href='javascript:void(0)'>取消预约</a>
				<a class="order-btn-2" href='javascript:void(0)'>排队中</a>
			</div>
		</li>
		<li class='week-course row mg0'>
			<div class='week-time col-lg-1 col-md-1 col-sm-2 col-xs-3'>
				08:00
			</div>
			<div class='week-subject col-lg-10 col-md-10 col-sm-8 col-xs-6'>
				<h3>如释维哈空中瑜伽</h3>
				<p class='coach-name'>教练：刘艳</p>
				<p class='coach-person'>还可预约<strong>10</strong>人&nbsp;&nbsp;&nbsp;<a href='course.html'>查看课堂详情</a></p>
			</div>
			<div class='coach-order col-lg-1 col-md-1 col-sm-2 col-xs-3'>
				<!-- 模态框（Modal）非会员预约成功-->
				<a class="order-btn" href='javascript:void(0)' data-toggle="modal" data-target="#alert-no-order">预 约</a>
				<a class="order-btn-1" href='javascript:void(0)'>取消预约</a>
				<a class="order-btn-2" href='javascript:void(0)'>排队中</a>
			</div>
		</li>
	</ul>
</div>
<!-- 非会员注册 -->
<!-- 模态框（Modal）2小时取消约课 -->
<div class="modal fade" id="alert-cancel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content" id='alert-cancel-main'>
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<div class='alert-cancel-pic'><img src="images/cancel.png" width='40'></div>
				<p class='alert-cancel-info'>开课前2小时内不可取消预约</p>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>
<!-- 模态框（Modal）必须评分 -->
<div class="modal fade" id="alert-judge" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content" id='alert-cancel-main'>
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<div class='alert-cancel-pic'><img src="images/cancel.png" width='40'></div>
				<p class='alert-cancel-info'>请对上一门课程进行评价</p>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>
<!-- 模态框（Modal）预约 -->
<div class="modal fade" id="alert-order" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content" id='alert-cancel-main'>
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<div class='alert-order-pic'><img src="images/success.png" width='40'></div>
				<p class='member-type'>如初卡会员</p>
				<p class='alert-order-info'>周三 18:00-如释空中瑜伽课程</p>
				<h3 class='alert-order-success'>预约成功</h3>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>
<!-- 模态框（Modal）购买 -->
<div class="modal fade" id="alert-sell" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content" id='alert-cancel-main'>
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<div class='alert-order-pic'><img src="images/cancel.png" width='40'></div>
				<p class='member-type'>如初卡会员</p>
				<p class='alert-order-info'>没有权限预约本课程</p>
				<a class='alert-sell-btn' href='javascript:void(0);'>立即购买</a>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>
<!-- 模态框（Modal）非如释会员购买 -->
<div class="modal fade" id="alert-sell-1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content" id='alert-cancel-main'>
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<div class='alert-order-pic'><img src="images/cancel.png" width='40'></div>
				<p class='member-type'>非如释会员</p>
				<p class='alert-order-info'>没有权限预约本课程</p>
				<a class='alert-sell-btn' href='javascript:void(0);'>立即购买</a>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>
<!-- 模态框（Modal）非会员填写信息 -->
<div class="modal fade" id="alert-new-order" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content" id='alert-new-main'>
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<p class='reg-info'>请填写您的课程预约信息</p>
				<form action="" method="post">
					<p class='reg-user'><input id='user-pic' type='text' name='user' placeholder="请填写您的真实姓名"  value=''></p>
					<p class='reg-tel'><input id='tel-pic' type='tel' name='tel' placeholder="请填写您的联系方式"  value=''></p>
					<button id='no-member' type='submit' class='reg-btn' >提 交</button>
				</form>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>
<!-- 模态框（Modal）非会员预约成功 -->
<div class="modal fade" id="alert-no-order" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content" id='alert-cancel-main'>
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<div class='alert-order-pic'><img src="images/success.png" width='40'></div>
				<h3 class='success-info'>如释瑜伽空中课程 <span> 预约成功</span></h3>
				<p class='success-info-2'>周一 20:30 <span>&nbsp;&nbsp;&nbsp;高新馆</span></p>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>
<tc_include file='Public/footer'/>
</body>
</html>